<template>
  <div class="contents">
    <div class="timeItem">
      <!-- <div class="timeChose">2023</div> -->

      <!-- <a-dropdown>
        <a @click.prevent class="timeChose"> {{ curYear }} </a>
        <template #overlay>
          <a-menu>
            <a-menu-item v-for="item in yearList" :key="item">
              <a href="javascript:;" @click="choseYear(item)">{{ item }}</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown> -->

      <weather></weather>
    </div>
    
    <!-- <div ref="maps" class="maps"></div> -->
    <!-- <div :id="id" class="container-map"></div> -->

    <div class="infotabs">
      <div class="three">产业强镇</div>
      <div class="one">太子参产业园</div>
      <!-- <div class="two">生物医院循环经济园</div> -->
      <!-- <div class="four">GAP标准化基地</div>
      <div class="five">优质种苗培育基地</div> -->
      <div class="six">中药材养生基地</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import zherongJson from "@/assets/mapdata/zherong.json";
import "echarts-gl";
import weather from "@/components/weather.vue";
import { useRoute, useRouter } from "vue-router";



const curYear = ref(new Date().getFullYear());
const yearList = ref([]);
const choseYear = (year) => {
  curYear.value = year;
  emit("changeYears", year);
};

const router = useRouter();

const id = ref("container" + Math.random());
let map = null;

const emit = defineEmits(["changeYears"]);
const initYear = () => {
  
  let now = new Date()
  curYear.value = now.getFullYear()
  yearList.value.push(curYear.value)
  for(let i = 1; i <=10; i++){
    yearList.value.push(curYear.value - i)
  }
}
onMounted(async () => {
  
 

  initYear()


});
</script>

<style scoped lang="scss">
.contents {
  position: relative;
}
.maps {
  height: vh(640);
  width: 100%;
}

.timeItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;

  .timeChose {
    width: vw(40);
    // width: 10%;
    // height: vh(26);
    background: rgba(44, 215, 188, 0.1);
    border-radius: vw(8);
    border: vh(1) solid #2cd7bc;
    padding: vh(4) vw(10);

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(12);
    color: #ffffff;
    cursor: pointer;
    // line-height: vh(26);
  }

}

.infotabs {
  right: 0;
  bottom: vw(20);
  position: absolute;
  width: vw(401);
  // height: vh(68);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;

  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: vh(12);
  color: #ffffff;
  line-height: vh(18);
  padding: 0 vw(10);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

  z-index: 10;
  > div {
    width: 33%;
    margin: vw(4) 0;
  }
  .one::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #58aaf9;
    margin-right: vw(8);
  }
  .two::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #a76832;
    margin-right: vw(8);
  }
  .three::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #ed3b3b;
    margin-right: vw(8);
  }
  .four::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #60ffe9;
    margin-right: vw(8);
  }
  .five::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #ffc905;
    margin-right: vw(8);
  }
  .six::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #2ebf27;
    margin-right: vw(8);
  }
}

.container-map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  box-shadow: 0 0 vw(80) vw(40) rgba(30, 73, 98, 1) inset;
}
</style>